{% extends "base.html" %}

{% block title %}用户登录 - 学术研究自动化平台{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
        <div class="card shadow">
            <div class="card-body p-5">
                <div class="text-center mb-4">
                    <i class="fas fa-sign-in-alt fa-3x text-primary mb-3"></i>
                    <h2 class="card-title">用户登录</h2>
                    <p class="text-muted">请输入您的登录凭据</p>
                </div>
                
                <form id="loginForm" method="POST">
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-user"></i>
                            </span>
                            <input type="text" class="form-control" id="username" name="username" 
                                   required placeholder="请输入用户名">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input type="password" class="form-control" id="password" name="password" 
                                   required placeholder="请输入密码">
                            <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="rememberMe" name="remember">
                        <label class="form-check-label" for="rememberMe">
                            记住我
                        </label>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg" id="loginBtn">
                            <i class="fas fa-sign-in-alt me-2"></i>
                            <span class="btn-text">登录</span>
                        </button>
                    </div>
                </form>
                
                <div class="text-center mt-4">
                    <p class="mb-0">
                        还没有账户？
                        <a href="{{ url_for('register') }}" class="text-decoration-none">立即注册</a>
                    </p>
                </div>
            </div>
        </div>
        
        <!-- 安全提示 -->
        <div class="card mt-3">
            <div class="card-body">
                <h6 class="card-title">
                    <i class="fas fa-shield-alt text-success me-2"></i>
                    安全提示
                </h6>
                <ul class="list-unstyled mb-0 small text-muted">
                    <li><i class="fas fa-check text-success me-2"></i>所有数据传输均采用SSL加密</li>
                    <li><i class="fas fa-check text-success me-2"></i>支持多因素身份验证</li>
                    <li><i class="fas fa-check text-success me-2"></i>自动检测异常登录行为</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 密码显示/隐藏切换
    $('#togglePassword').click(function() {
        const passwordField = $('#password');
        const icon = $(this).find('i');
        
        if (passwordField.attr('type') === 'password') {
            passwordField.attr('type', 'text');
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
        } else {
            passwordField.attr('type', 'password');
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
        }
    });
    
    // 表单提交处理
    $('#loginForm').submit(function(e) {
        e.preventDefault();
        
        const $form = $(this);
        const $btn = $('#loginBtn');
        const $btnText = $('.btn-text');
        
        // 禁用按钮并显示加载状态
        $btn.prop('disabled', true);
        $btnText.html('<i class="fas fa-spinner fa-spin me-2"></i>登录中...');
        
        // 获取表单数据
        const formData = {
            username: $('#username').val().trim(),
            password: $('#password').val()
        };
        
        // 发送AJAX请求
        $.ajax({
            url: $form.attr('action') || '{{ url_for("login") }}',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function(response) {
                if (response.success) {
                    // 显示成功消息
                    showAlert('登录成功！正在跳转...', 'success');
                    
                    // 延迟跳转
                    setTimeout(function() {
                        window.location.href = response.redirect || '{{ url_for("dashboard") }}';
                    }, 1000);
                } else {
                    showAlert(response.error || '登录失败', 'danger');
                    resetButton();
                }
            },
            error: function(xhr) {
                let errorMsg = '登录失败，请稍后重试';
                
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                
                showAlert(errorMsg, 'danger');
                resetButton();
            }
        });
        
        function resetButton() {
            $btn.prop('disabled', false);
            $btnText.html('<i class="fas fa-sign-in-alt me-2"></i>登录');
        }
    });
    
    // 显示警告消息
    function showAlert(message, type) {
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        // 移除现有警告
        $('.alert').remove();
        
        // 添加新警告
        $('.card-body').prepend(alertHtml);
    }
    
    // 输入验证
    $('#username, #password').on('input', function() {
        const username = $('#username').val().trim();
        const password = $('#password').val();
        
        $('#loginBtn').prop('disabled', !username || !password);
    });
    
    // 回车键提交
    $('#username, #password').keypress(function(e) {
        if (e.which === 13) {
            $('#loginForm').submit();
        }
    });
});
</script>
{% endblock %}